<template>
	<view>
		<TopNav title="饲料出库"></TopNav>
		<u-form class="padding-lr-sm padding-bottom" labelWidth="98px" :model="form" ref="form" :rules="rules">
			<view class="padding-tb">
				<text class="cuIcon-title text-gray"></text>
				<text class="">基本信息</text>
			</view>
			<view class="padding-tb-xs padding-lr radius bg-white">
				<u-form-item label="出库时间" borderBottom required @click="handleOpenDateSelect" prop="time">
					<u-input :value="form.time" border="none" inputAlign="right" placeholder="选择出库时间"
						class="pointer-none">
						<u-icon slot="suffix" name="arrow-right"></u-icon>
					</u-input>
				</u-form-item>
				<u-form-item label="出库饲料" borderBottom required prop="productId" @click="handleOpenFeedSelect"
					:class="{'pointer-none':isReadonly}">
					<u-input v-model="form.productName" border="none" inputAlign="right" placeholder="选择出库饲料" readonly
						class="pointer-none">
						<u-icon slot="suffix" name="arrow-right"></u-icon>
					</u-input>
				</u-form-item>
				<u-form-item label="出库数量" borderBottom required prop="quantity">
					<u-input v-model="form.quantity" border="none" placeholder="填写出库数量" inputAlign="right" :formatter="formatNumber">
						<view slot="suffix" class="" style="width: 70px;">
							<DictPicker :dict="outboundUnits" v-model="form.quantityUnit" placeholder="单位">
							</DictPicker>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item label="出库用途" borderBottom required prop="purpose">
					<DictPicker dict="biz_product_purpose" v-model="form.purpose" placeholder="选择出库用途">
					</DictPicker>
				</u-form-item>

			</view>
			<view class="text-right padding-top-xs">
				<text class="text-gray text-width">饲料规格：</text>
				<text class="text-orange">{{specificationsUnitDictName || '-'}}</text>
			</view>
			<view class="padding-tb-xs padding-lr radius bg-white margin-top">
				<u-form-item label="备注" labelPosition="top">
					<u-textarea v-model="form.remarks" border="bottom" placeholder="填写备注信息" autoHeight></u-textarea>
				</u-form-item>

			</view>
			<view class="padding-tb">
				<text class="cuIcon-title text-gray"></text>
				<text class="">相关图片</text>
			</view>
			<view class="padding radius bg-white">
				<UploadImage v-model="form.fileUrls" :limit="9"></UploadImage>
			</view>
		</u-form>
		<view class="bottom-tools padding flex justify-around bg-white">
			<van-button class='basis-xl' type="info" @click="handleSubmit">
				提交
			</van-button>
		</view>
	<u-datetime-picker :show="dateShow" :value="timestampFormat" mode="datetime" closeOnClickOverlay
			:maxDate="maxDate" :minDate="minDate" @close="handleCloseDateSelect" @cancel="handleCloseDateSelect"
			@confirm="handleConfirmDateSelect"></u-datetime-picker>
	</view>
</template>

<script>
	import UploadImage from "@/components/upload-image.vue"
	import dayjs from 'dayjs'
	import {
		outbounds
	} from "@/api/work/products-inventory"
	import DictPicker from '@/components/dict-picker/index.vue'

	export default {
		components: {
			UploadImage,
			DictPicker
		},
		data() {
			return {
				maxDate: dayjs().valueOf(),
				minDate: dayjs('2024-01-01 00:00').valueOf(),
				dateShow: false,
				isReadonly: false,
				specificationsUnitDictName: '', // 饲料规格
				queryParams: {
					id: undefined
				},
				form: {
					productTypeDict: 'SL',
					time: undefined,
					productId: undefined,
					productName: undefined,
					quantity: undefined,
					purpose: undefined,
					remarks: undefined,
					fileUrls: undefined
				},
				rules: {
					time: {
						type: 'string',
						required: true,
						message: '出库时间不能为空',
						trigger: ['blur', 'change']
					},
					productId: {
						type: 'string',
						required: true,
						message: '出库饲料不能为空',
						trigger: ['blur', 'change']
					},
					purpose: {
						type: 'string',
						required: true,
						message: '饲料来源不能为空',
						trigger: ['blur', 'change']
					},
					quantity: {
						type: 'string',
						required: true,
						message: '出库数量不能为空',
						trigger: ['blur', 'change']
					}
				}

			}
		},
		computed: {
			timestampFormat() {
				return dayjs(this.form.time).valueOf()
			},
			outboundUnits() {
				let str = this.specificationsUnitDictName
				if (str.includes('/')) {
					// 如果有，则按照 '/' 分割
					let array = str.split('/');
					let result = array.map(item => {
						return {
							value: item,
							text: item
						}
					})
					return result
				} else {
					// 如果没有，则返回原值组成的数组
					return [{
						text: str,
						value: str
					}];
				}
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form.setRules(this.rules)
		},
		onLoad(query) {
			if (query.id) {
				this.form.productId = query.id
				this.form.productName = query.name
				this.specificationsUnitDictName = query.unit
				this.isReadonly = true
			}
		},
		onShow() {

		},
		onUnload() {
			uni.$off('feedSelect', this.receiveFeedSelect)
		},
		methods: {
			handleCloseDateSelect() {
				this.dateShow = false
			},
			handleConfirmDateSelect(date) {
				this.form.time = dayjs(date.value).format('YYYY-MM-DD HH:mm')
				this.dateShow = false
			},
			handleOpenDateSelect() {
				this.dateShow = true
			},
			formatNumber(input) {
				// 将输入转为数字类型
				let number = parseFloat(input);
				// 判断是否是有效的数字
				if (isNaN(number)) {
					return input; // 如果不是数字，直接返回原字符串
				}
				// 判断小数部分的位数
				if (number % 1 !== 0) {
					// 如果是浮动数，格式化为一位小数
					return number.toFixed(1);
				} else {
					// 如果是整数，直接返回原字符
					return input;
				}
			},
			receiveFeedSelect(val) {
				if (val.length === 0) {
					this.form.productId = undefined
					this.form.productName = undefined
					return
				}
				let {
					id,
					name,
					specificationsUnitDictName
				} = val[0]
				this.specificationsUnitDictName = specificationsUnitDictName
				this.form.productId = id
				this.form.productName = name
			},
			handleOpenFeedSelect() {
				uni.$on('feedSelect', this.receiveFeedSelect)
				this.$tab.navigateTo('/pages/work/feed-inventory/select?id=' + this.form.productId)
			},
			handleSubmit(type) {
				this.$refs.form.validate().then(res => {
					outbounds(this.form).then(res => {
						uni.$emit('refreshData')
						this.$tab.navigateBack()
					})
				})

			},
			reset() {
				this.form = {
					productTypeDict: 'SL',
					time: undefined,
					productId: undefined,
					productName: undefined,
					quantity: undefined,
					purpose: undefined,
					remarks: undefined,
					fileUrls: undefined
				}
				this.$nextTick(() => {
					this.$refs.form.resetFields()
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/common/var.scss";
	page {
		@include fixed-bottom;
	}
	
</style>